<template>
  <div>
    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />
        列表
      </div>
      <!--    搜索条件-->
      <el-form ref="queryParams" :model="queryParams" :inline="true" class="el-form-01">
        <el-form-item label="组件名称">
          <el-input
            v-model="queryParams.title"
            placeholder="组件名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item prop="compType" label="组件类型">
          <my-select
            v-model="queryParams.compType"
            clearable
            :dict-type="'compTypeList'"
          >
            <el-option label="全部" value="" />
          </my-select>
        </el-form-item>
        <el-form-item prop="persion" label="修改日期">
          <el-date-picker
            v-model="queryParams.updateTime"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" size="mini" @click="handleQuery">搜索</el-button>
          <el-button size="mini" @click="resetEvent">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-box">
      <!-- 搜索列表 -->
      <div class="app-seachTable pt30">
        <!-- 操作按钮 -->
        <div class="text-right mb5">
          <el-button
            class="ml10"
            size="small"
            type="primary"
            style="background-color: #167ed4; border-color: #167ed4"
            @click="handleDialog('新增')"
          >新建组件</el-button>
        </div>
        <el-table class="table-list-1" :data="dataList">
          <el-table-column label="序号" width="55" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="组件名称">
            <template slot-scope="scope">
              <span>{{ scope.row.title || "--" }} </span>
            </template>
          </el-table-column>
          <el-table-column label="组件类型">
            <template slot-scope="scope">
              <span>{{ scope.row.compType || "--" | dictCustom(compTypeList) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="创建人员">
            <template slot-scope="scope">
              <span>{{ scope.row.creatorName || "--" }} </span>
            </template>
          </el-table-column>
          <el-table-column label="修改日期" width="200px">
            <template slot-scope="scope">
              <span>{{
                scope.row.updateTime ||
                  scope.row.createTime ||
                  "--" | outHoursMinutesSeconds
              }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100px">
            <template slot-scope="scope">
              <span
                v-if="scope.row.useFlag === '1'"
                class="flag-green"
              >启用</span>
              <span v-else class="flag-red">停用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="350px"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDialog('编辑', scope.row)"
              >编辑</el-button>
              <div>|</div>
              <el-button
                v-if="scope.row.useFlag === '1'"
                size="mini"
                type="text"
                @click="flagBatch(scope.row.useFlag, [scope.row.compId])"
              >停用</el-button>
              <el-button
                v-else
                size="mini"
                type="text"
                @click="flagBatch(scope.row.useFlag, [scope.row.compId])"
              >启用</el-button>
              <div v-if="scope.row.useFlag !== '1'">|</div>
              <el-button
                v-if="scope.row.useFlag !== '1'"
                size="mini"
                type="text"
                @click="handleDel(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagingstyle mt15">
          <el-pagination
            background
            layout="pager, prev, next"
            prev-text="上一页"
            next-text="下一页"
            :total="page.total"
            :current-page.sync="page.pageNum"
            :page-size="page.pageSize"
            @current-change="getList"
          />
        </div>
      </div>
      <!-- 编辑和新增 -->
      <dialog-detail
        ref="dialogDetail"
        @closeDialog="fn_closeDialog"
      />
      <!-- 自定义 -->
      <component
        :is="componentType"
        v-if="componentType !== false"
        :ref="componentType"
      />
    </div>
  </div>

</template>

<script>
import dialogDetail from './components/dialogDetail'
import { _getListPage } from '@/api/portal-manage/component-manage'
import { getDictDataByTypeCustom } from '@/utils/JsonCacheUtil'

export default {
  name: 'ComponentManage',
  components: {
    // 通用编辑
    dialogDetail
  },
  data() {
    return {
      ids: [],
      componentType: false,
      useflag: '',
      // 角色表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        title: '',
        compType: '',
        creatorid: '',
        updateTime: []
      },
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      useflagList: [
        { id: 1, value: '启用' },
        { id: 0, value: '停用' }
      ],
      compTypeList: getDictDataByTypeCustom('compTypeList')
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    resetEvent() {
      this.$refs['queryParams'].resetFields()
      this.$set(this.queryParams, 'title', '')
      this.$set(this.queryParams, 'updateTime', [])
    },
    /** 查询角色列表 */
    getList() {
      if (
        !!this.queryParams.updateTime &&
          this.queryParams.updateTime.length > 0
      ) {
        this.queryParams.updateTime[0] =
            this.queryParams.updateTime[0] + ' 00:00:00'
        this.queryParams.updateTime[1] =
            this.queryParams.updateTime[1] + ' 00:00:00'
      }

      _getListPage({
        ...this.page,
        ...this.queryParams,
        updateTime: this.queryParams.updateTime
      }).then((res) => {
        if (res.result === 'success') {
          this.dataList = res.data.list
          this.page = {
            pageNum: res.data.pageNum,
            pageSize: res.data.pageSize,
            total: res.data.total
          }
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.compId)
    },
    // 编辑和新增
    handleDialog(dialogTitle, row) {
      this.$refs.dialogDetail.init(dialogTitle, row)
    },
    // 弹出框的关闭回调
    fn_closeDialog(data) {
      this.getList()
    },
    handleDel(row) {
      this.$confirm(`确认删除么？`, '提示', {}).then(() => {
      })
    },
    flagBatch(state, idList) {
      this.$confirm(
        `确认修改为${state === '1' ? '停用' : '启用'}状态么？`,
        '提示',
        {}
      ).then(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
